<template>
	<div id="classesList">
		<h1>Classes List</h1>
		<table id="classesList">
			<thead>
				<tr id="test">
					<th>班级名称</th>
					<th>班级人数</th>
					<th>班级老师</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for='item in classesData' :key='item._id'>	
					<td>{{item.name}}</td>
					<td>{{item.classTotalStudent}}</td>
					<td>
						<template v-for='item in item.teachers'>
							<span :key='item._id'>{{item.name}}</span><br>
						</template>
					</td>
					<td>
						<button>修改</button><br>
						<button>删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
import axios from 'axios'
import {mapActions,mapState} from 'vuex' 

export default {
  mounted(){
    this.getClasses();    
  },
  computed:{
  	...mapState(["classesData"])
  },
  methods:{
    ...mapActions(["getClasses"]),

  }
}
</script>

<style scoped>
	table ,tr,td{
		border-collapse: collapse;
	}
	table#classesList  tr{
		border-bottom: 1px solid black;
	}
</style>